<template>
    <main class="card" style="height: calc(100vh - 60px);width: 100%;">
        <VueFlow :nodes="nodes" :edges="edges" fit-view-on-init>
            <Controls :showInteractive="false" />
            <Background />
        </VueFlow>
        <!-- <input type="text" :value="JSON.stringify(getNodes)" style="width: 100%;" /> -->
        <NModal v-model:show="showModal">
            <NCard class="modal">
                <template #header>
                    <span style="font-weight: bold;">
                        {{ nowSelectedName }}
                    </span>
                </template>
                <NSpace vertical>
                    {{describe.find((item) => item.id === nowSelectedId)?.content}}
                    <NSpace justify="end">
                        <NButton @click="showModal = false">关闭</NButton>
                        <NButton type="primary" @click="changeLearnContent">
                            将学习内容设为{{ nowSelectedName }}
                        </NButton>
                    </NSpace>
                </NSpace>
            </NCard>
        </NModal>
    </main>
</template>

<script setup lang="ts">
import { NGrid, NGridItem, NCard, NProgress, NSteps, NStep, NSpace, NModal, NButton } from "naive-ui";
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue'
import { VueFlow, useVueFlow, type Edge } from '@vue-flow/core'
import { Controls } from '@vue-flow/controls'
import { Background } from '@vue-flow/background'
import learnUtils from '@/api/learn'
import progressApi from '@/api/progress'

const { nodesDraggable } = useVueFlow()
const { onNodesChange, onEdgesChange, deleteKeyCode, getNodes, addEdges } = useVueFlow()

deleteKeyCode.value = "none";

nodesDraggable.value = !nodesDraggable.value;

onNodesChange((changes) => {
    // changes are arrays of type `NodeChange`
    // console.log(getNodes.value)
    console.log(changes)
    // nowSelectedName.value = changes[0].id
    // showModal.value = true;
    changes.forEach((change) => {
        if (change.type === 'select' && change.selected) {
            nowSelectedId.value = change.id
            // find element by id from nodes
            const node = nodes.value.find((node) => node.id === change.id)
            if (node) {
                nowSelectedName.value = node.data.label
            }
            showModal.value = true;
        }
    })
    console.log(nowSelectedId.value);
})


import '@vue-flow/controls/dist/style.css'

const router = useRouter();

const showModal = ref(false)
const nowSelectedId = ref("")
const nowSelectedName = ref("")
const nowLearningId = ref("");


const nodes = ref([
    {
        type: 'input',
        id: 'none',
        data: { label: '未掌握' },
        position: { x: -400, y: -300 },
        style: { width: '5rem' },
        selectable: false,

    },
    {
        id: 'doing',
        data: { label: '学习中' },
        position: { x: -400, y: -250 },
        style: { backgroundColor: 'lightblue', width: '5rem' },
        selectable: false,
        parent: 'none',

    },
    {
        type: 'output',
        id: 'ok',
        data: { label: '已掌握' },
        position: { x: -400, y: -200 },
        style: { backgroundColor: 'lightgreen', width: '5rem' },
        selectable: false,
        parent: 'doing',
    },
    {
        id: 'computer_science',
        data: { label: '计算机科学基础' },
        position: { x: -300, y: -300 },
        style: { backgroundColor: 'rgba(16, 16, 16, 0.2)', width: '600px', height: '250px' },
        selectable: false,
    },
    {
        id: 'programming_skills',
        position: { x: -275, y: -250 },
        data: { label: '程序设计' },
    },
    {
        id: 'data_structures',
        position: { x: -100, y: -250 },
        data: { label: '数据结构' },
    },
    {
        id: 'algorithms',
        position: { x: 75, y: -250 },
        data: { label: '算法设计' },
    },
    {
        id: 'computer_organization',
        position: { x: -275, y: -185 },
        data: { label: '计算机组成原理' },
    },
    {
        id: 'network',
        position: { x: -100, y: -185 },
        data: { label: '计算机网络' },
    },
    {
        id: 'operating_systems',
        position: { x: 75, y: -185 },
        data: { label: '操作系统' },
    },
    {
        id: 'web_development',
        position: { x: -275, y: -120 },
        data: { label: 'web开发' },
    },
    {
        id: 'software_engineering',
        position: { x: -100, y: -120 },
        data: { label: '软件工程' },
    },
    {
        id: 'compilation_principles',
        position: { x: 75, y: -120 },
        data: { label: '编译原理' },
    },
    {
        id: 'development',
        position: { x: -200, y: 0 },
        parent: 'computer_science',
        data: { label: '研发' },
    },
    {
        id: 'web_frontend',
        position: { x: -300, y: 100 },
        parent: 'development',
        data: { label: 'web前端' },
    },
    {
        id: 'web_backend',
        position: { x: -100, y: 100 },
        parent: 'development',
        data: { label: 'web后端' },
    },
    {
        id: 'mobile',
        position: { x: -300, y: 200 },
        parent: 'development',
        data: { label: '移动端' },
    },
    {
        id: 'desktop',
        position: { x: -100, y: 200 },
        parent: 'development',
        data: { label: '桌面端' },
    },
    {
        id: 'mini_program',
        position: { x: -200, y: 300 },
        parent: 'development',
        data: { label: '小程序' },
    },
    {
        id: 'research',
        position: { x: 200, y: 0 },
        parent: 'computer_science',
        data: { label: '科研' },
    },
    {
        id: 'ai',
        position: { x: 200, y: 200 },
        parent: 'research',
        data: { label: '人工智能' },
    },
    {
        id: 'cross_discipline',
        position: { x: 300, y: 100 },
        parent: 'research',
        data: { label: '交叉学科' },
    },
    {
        id: 'big_data',
        position: { x: 100, y: 100 },
        parent: 'research',
        data: { label: '大数据分析' },
    }
]);

const describe = ref([
    {
        id: "computer_science",
        content: "计算机科学基础是信息技术领域的核心学科，涵盖计算机系统、算法设计、数据结构、编程语言等基础知识，为后续的技术研发和科学研究提供理论支撑和实践指导。"
    },
    {
        id: "development",
        content: "研发是将计算机科学理论转化为实际应用的过程，包括软件开发、系统设计、技术实现等环节，是推动信息技术创新和产业发展的关键力量。"
    },
    {
        id: "web_frontend",
        content: "Web前端开发专注于用户界面和交互体验，主要使用HTML、CSS、JavaScript等技术构建网站和Web应用的可视化部分，注重用户体验和界面设计。"
    },
    {
        id: "web_backend",
        content: "Web后端开发负责服务器端逻辑和数据处理，通常使用Node.js、Python、Java等语言及框架，处理数据库操作、业务逻辑和API接口，为前端提供数据支持。"
    },
    {
        id: "mobile",
        content: "移动端开发针对智能手机和平板设备，使用原生技术（如Android的Java/Kotlin、iOS的Swift/Objective-C）或跨平台框架（如Flutter、React Native），创建适应移动场景的应用程序。"
    },
    {
        id: "desktop",
        content: "桌面端开发针对传统计算机系统，使用C++、C#、Java等语言及相应框架，创建具有完整功能和复杂交互的桌面应用程序，常用于专业软件和系统工具开发。"
    },
    {
        id: "mini_program",
        content: "小程序开发是轻量级的应用开发方式，基于平台提供的框架（如微信小程序、支付宝小程序），具有无需安装、即用即走的特点，适合快速开发和部署各类便捷服务。"
    },
    {
        id: "research",
        content: "计算机科学研究探索该领域的前沿理论和技术，包括算法优化、系统架构、人工智能、网络安全等方向，旨在推动技术边界扩展和学科进步。"
    },
    {
        id: "ai",
        content: "人工智能研究模拟人类智能的理论、方法和应用，涵盖机器学习、深度学习、自然语言处理、计算机视觉等领域，正在深刻改变各行业的发展模式和人类生活方式。"
    },
    {
        id: "cross_discipline",
        content: "交叉学科研究结合计算机科学与其他领域知识，如生物信息学、计算金融、智能交通等，通过跨领域融合创新解决复杂现实问题，拓展技术应用边界。"
    },
    {
        id: "big_data",
        content: "大数据分析专注于海量数据的存储、处理和挖掘，使用Hadoop、Spark等工具及机器学习算法，从数据中提取有价值的信息和洞见，支持决策和预测。"
    }, {
        id: "programming_skills",
        content: "程序设计是计算机学科的入门核心，涵盖变量、控制结构、函数、面向对象等基础概念，培养用代码抽象与解决实际问题的能力，为后续算法、系统、软件开发奠定语言与思维基础。"
    },
    {
        id: "data_structures",
        content: "数据结构研究如何高效组织与管理数据，包括线性表、树、图、哈希等经典结构及其时空复杂度分析，是编写高性能算法与大型系统的基石，直接决定程序的可扩展性与运行效率。"
    },
    {
        id: "algorithms",
        content: "算法设计关注问题求解的策略与效率，涵盖排序、搜索、动态规划、贪心、图论等范式，通过复杂度分析与正确性证明，培养抽象建模与优化思维，是人工智能、大数据等前沿领域的核心驱动力。"
    },
    {
        id: "computer_organization",
        content: "计算机组成原理揭示硬件如何执行指令，内容包括数据表示、运算器、控制器、存储层次与I/O系统，连接数字逻辑与操作系统，为理解性能瓶颈、编写高效程序及设计新型体系结构提供底层视角。"
    },
    {
        id: "network",
        content: "计算机网络讲解互联网分层体系与协议，涵盖TCP/IP、路由、传输控制、网络安全等机制，支撑分布式系统与云服务，是构建高可用、高并发Web及移动应用不可或缺的知识模块。"
    },
    {
        id: "operating_systems",
        content: "操作系统管理硬件资源并抽象为易用接口，研究进程、线程、内存、文件系统与设备驱动，通过并发、同步与虚拟化技术提升效率与安全，是理解服务器、嵌入式及云平台的必经之路。"
    },
    {
        id: "web_development",
        content: "Web开发聚焦浏览器-服务器架构，前端负责页面呈现与交互，后端负责业务逻辑与数据持久化，融合HTTP协议、数据库、API设计等知识，实现跨平台、可伸缩的互联网应用。"
    },
    {
        id: "software_engineering",
        content: "软件工程系统化地指导大型软件开发流程，包括需求分析、设计模式、测试、持续集成与项目管理，通过工程化方法降低复杂度、提升质量，是团队协作与产品迭代的核心方法论。"
    },
    {
        id: "compilation_principles",
        content: "编译原理研究高级语言到机器码的翻译过程，涵盖词法、语法、语义分析及优化技术，既支撑新语言与工具链设计，也深化对程序运行机理和性能调优的理解。"
    },
]);

// these are our edges
const edges = ref<Edge[]>([
])

//add edges for each node to its parent
nodes.value.forEach((node) => {
    if (node.parent) {
        edges.value.push({
            id: `${node.id}-${node.parent}`,
            source: node.parent,
            target: node.id,
            type: 'default',
        })
    }
})

function changeLearnContent() {
    progressApi.setNow(nowSelectedId.value)
        .then((res) => {
            console.log(res);
            window.$utils.message.success("学习内容设置成功");

            // 之前的学习内容染色恢复
            if (nowLearningId.value) {
                const previousNode = instance.findNode(nowLearningId.value);
                if (previousNode) {
                    instance.updateNode(nowLearningId.value, {
                        style: {
                            ...previousNode.style,
                            backgroundColor: '' // 设置为已掌握颜色
                        }
                    });
                }
            }
            // 更新节点颜色
            const nowNode = instance.findNode(nowSelectedId.value)

            if (nowNode) {
                instance.updateNode(nowSelectedId.value, {
                    style: {
                        ...nowNode.style,
                        backgroundColor: '#ffe58f' // 设置为学习中颜色
                    }
                })
            }
            // 更新当前学习内容ID
            nowLearningId.value = nowSelectedId.value;
            // 关闭模态框
            showModal.value = false;
        })
        .catch((err) => {
            window.$utils.message.error("设置失败");
            console.error(err);
        });
}

const instance = useVueFlow()

onMounted(() => {
    progressApi.getProgress()
        .then((progress) => {
            console.log("学习进度：", progress);
            nowLearningId.value = progress.now || "";
            // 染色当前学习内容
            if (progress.now) {
                const nowNode = instance.findNode(progress.now)
                if (nowNode) {
                    instance.updateNode(progress.now, {
                        style: {
                            ...nowNode.style,
                            backgroundColor: '#ffe58f'
                        }
                    })
                }
            }

            // 染色已掌握内容
            if (Array.isArray(progress.mastered)) {
                progress.mastered.forEach((id: string) => {
                    const masteredNode = instance.findNode(id)
                    if (masteredNode) {
                        instance.updateNode(id, {
                            style: {
                                ...masteredNode.style,
                                backgroundColor: '#b7eb8f'
                            }
                        })
                    }
                })
            }
        })
        .catch((err) => {
            console.error("获取学习进度失败：", err);
        });
});


</script>

<style scoped>
@media (max-width: 600px) {
    .card {
        width: calc(599px - 20px);
        max-width: 100%;
        margin: auto;
    }

    .modal {
        width: calc(100% - 100px);
        max-width: 100%;
        margin: auto;
    }
}

/* 当视口宽度大于或等于600px时 */
@media (min-width: 600px) {
    .card {
        width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
    }

    .modal {
        width: calc(500px);
    }
}

.card {
    margin-top: 1rem;
}
</style>